<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="isAdd ? '新增' : '编辑'" width="500px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px">
      <el-form-item label="公众号名称" >
        <el-input v-model="form.wechatName" style="width: 350px;"/>
      </el-form-item>
      <el-form-item label="微信号ID" >
        <el-input v-model="form.wechatCade" style="width: 350px;"/>
      </el-form-item>
      <el-form-item label="可接广告类型" >
        <!--<el-input v-model="form.advertisementType" style="width: 370px;"/>-->
       <!-- <div>{{form.advertisementType}}</div>-->
        <el-checkbox-group v-model="dataForm.adArr" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="a in ad" :label="a.id" :key="a.name">{{a.name}}</el-checkbox>
        </el-checkbox-group>
        <div>{{dataForm.adArr}}</div>
      </el-form-item>
      <el-form-item label="所属公司" >
        <el-input v-model="form.company" style="width: 350px;"/>
      </el-form-item>
      <el-form-item label="粉丝数量" >
        <el-input-number v-model="form.fansNumber" :min="1" label="粉丝数量"></el-input-number>
       <!-- <div>{{num}}</div>-->
       <!-- <el-input v-model="form.fansNumber" style="width: 370px;"/>-->
      </el-form-item>
      <el-form-item label="男女比例" >
        <template>
          <img src="@/assets/logo/man.png" style="width: 30px;height: 30px"><el-input-number v-model="form.proportion"controls-position="right" :min="1":max="100" size="small" @change="proportions"></el-input-number>
          <img src="@/assets/logo/girl.png" style="width: 30px;height: 30px"><el-input-number v-model="dataForm.girl" controls-position="right" :disabled="true"></el-input-number>
         <!-- <div>{{man}}</div>-->
        </template>
      </el-form-item>
      <el-form-item label="公众号类型 " >

          <el-radio v-model="form.type" label="0">公众号</el-radio>
          <el-radio v-model="form.type" label="1">服务号</el-radio>

      </el-form-item>
      <el-form-item label="客服" >
        <el-input v-model="form.customerService" style="width: 350px;"/>
      </el-form-item>
     <!-- <el-form-item label="创建时间" >
        <el-date-picker v-model="form.creationTime" type="datetime" style="width: 370px;"/>
      </el-form-item>-->
      <el-form-item label="备注" >
        <el-input v-model="form.remark" style="width: 350px;"/>
      </el-form-item>


    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { add, edit } from '@/api/wechatCode'
import {getList} from '@/api/advertisingType'

const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
  props: {
    isAdd: {
      type: Boolean,
      required: true
    },
    dataForm: {
      type: Object,
      required: true
    }

  },
  watch: {

  },
  mounted(){
   /* this.radio = this.form.type*/

    getList().then(res => {
      if ( res.code==='0000') {
        this.ad=res.data
        for (var i = 0;i<this.ad.length;i++){

        }
      }
      console.log(this.ad)
    }).catch(err => {

      console.log(err.response.data.message)
    })
  },
  data() {
    return {
      loading: false,
      dialog: false,
      //num:1,//粉丝数量
      man:0,//男占比
      //girl:0,//女占比
      radio: this.dataForm.type,
      form: {
        id: '',
        advertisementType: '',
        company: '',
        creationTime: '',
        customerService: '',
        fansNumber: '',
        proportion: '',
        remark: '',
        type: '',
        updateTime: '',
        wechatCade: '',
        wechatName: '',
        adJson: []
      },
      ad:[],
      checkedCities: [1,2],
      cities: cityOptions,
      rules: {
      }
    }
  },
  methods: {
    cancel() {
      this.resetForm()
      this.checkedCities = []
      this.dataForm.girl =0
    },
    doSubmit() {
      this.loading = true
      if (this.isAdd) {
        this.doAdd()
      } else this.doEdit()
    },
    doAdd() {
      this.form.advertisementType=this.checkedCities
      add(this.form).then(res => {
        this.resetForm()
        this.checkedCities = []
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {

      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.checkedCities = []
      this.dataForm.girl =0
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        advertisementType: '',
        company: '',
        creationTime: '',
        customerService: '',
        fansNumber: '',
        proportion: '',
        remark: '',
        type: '',
        updateTime: '',
        wechatCade: '',
        wechatName: ''
      }
    },
    proportions(value){
      this.dataForm.girl = 100-value
      console.log(this.dataForm)
    },
    handleCheckedCitiesChange(value) {
      // let checkedCount = value.length;
    /*  this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length*/
    }
  }
}
</script>

<style scoped>

</style>
